window.addEventListener("load", async () => {
  try {
    const res = await axios({
      url: "/dashboard",
      //   headers:{
      //     authorization:localStorage.getItem('token'),
      // },
    })
    //显示预览区域的数据
    const data = res.data.overview
    for (const k in data) {
      document.querySelector(`[name='${k}']`).innerHTML = data[k]
    }
    //解构对象
    const { year, groupData, salaryData, provinceData } = res.data
    console.log(res)
    //薪资走向折线图
    function salaryEchert(year) {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.querySelector("#line"))
      option = {
        title: {
          text: "2022薪资走向",
          top: "5%",
          left: "3%",
        },
        xAxis: {
          type: "category",
          //更换数据月份
          data: year.map((v) => v.month),
          axisLine: {
            lineStyle: {
              type: "dashed",
              color: "#888",
            },
          },
        },
        yAxis: {
          splitLine: {
            lineStyle: {
              type: "dashed",
            },
          },
        },
        tooltip: {
          trigger: "axis",
        },
        // grid: {
        //   left: "10%",
        //   top: "20%",
        //   right: "10%",
        //   bottom: "10%",
        // },
        series: [
          {
            //更换数据
            data: year.map((v) => v.salary),
            type: "line",
            smooth: true,
            symbolSize: 5,
            lineStyle: {
              color: "pink",
            },
            areaStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "pink", // 0% 处的颜色
                  },
                  {
                    offset: 0.7,
                    color: "white", // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
          },
        ],
        color: ["skyblue"],
      }
      //使用指定的配置项和数据显示图表
      myChart.setOption(option)
    }
    salaryEchert(year)

    //班级薪资分布饼状图
    function salaryPie(salaryData) {
      var myChart = echarts.init(document.querySelector("#salary"))
      const option = {
        title: {
          text: "班级薪资分布",
          top: "5%",
          left: "3%",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          bottom: "5%",
          left: "center",
        },
        series: [
          {
            name: "班级薪资分布",
            type: "pie",
            radius: ["60%", "50%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },

            label: {
              show: false,
            },

            labelLine: {
              show: false,
            },
            data: salaryData.map((v) => {
              return {
                value: v.g_count + v.b_count,
                name: v.label,
              }
            }),
          },
        ],
        color: ["#fda224", "#5097ff", "#3fceff", "#34d39a"],
      }
      myChart.setOption(option)
    }
    salaryPie(salaryData)

    //小组薪资柱状图
    function groupSalary() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.querySelector("#lines"))
      option = {
        xAxis: {
          type: "category",
          data: groupData[1].map((v) => v.name),
          axisLine: {
            lineStyle: {
              type: "dashed",
              color: "#888",
            },
          },
        },
        tooltip: {
          trigger: "axis",
        },
        yAxis: {
          type: "value",
          splitLine: {
            lineStyle: {
              type: "dashed",
            },
          },
        },
        series: [
          {
            data: groupData[1].map((v) => v.hope_salary),
            type: "bar",
          },
          {
            data: groupData[1].map((v) => v.salary),
            type: "bar",
          },
        ],
        color: [
          {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "pink", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "white", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
          {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "skyblue", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "white", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        ],
      }

      //使用指定的配置项和数据显示图表
      myChart.setOption(option)
      // 点击切换数据
      const btns = document.querySelectorAll("#btns button")
      btns.forEach((dom) => {
        dom.addEventListener("click", function () {
          //删除所有
          document.querySelector("#btns .btn-blue").classList.remove("btn-blue")
          //给自己添加
          this.classList.add("btn-blue")
          const index = this.innerHTML.trim()
          option.xAxis.data = groupData[index].map((v) => v.name)
          option.series[0].data = groupData[index].map((v) => v.hope_salary)
          option.series[1].data = groupData[index].map((v) => v.salary)
          myChart.setOption(option)
        })
      })
    }
    groupSalary()

    //男女生薪资分布饼图
    function sexPie(salaryData) {
      var myChart = echarts.init(document.querySelector("#gender"))
      const option = {
        title: [
          {
            text: "男女生薪资分布",
            left: "center",
            top: 50,
          },
          {
            subtext: "男生",
            left: "50%",
            top: "40%",
            textAlign: "center",
            subtextStyle: {
              fontWeight: 700,
            },
          },
          {
            subtext: "女生",
            left: "50%",
            top: "70%",
            textAlign: "center",
            subtextStyle: {
              fontWeight: 700,
            },
          },
        ],

        series: [
          {
            type: "pie",
            center: ["50%", "50%"],
            radius: ["40%", "30%"],
            data: salaryData.map((v) => {
              return {
                name: v.v_label,
                value: v.b_count,
              }
            }),
            label: {
              position: "outer",
              alignTo: "none",
              bleedMargin: 5,
            },
            left: "center",
            right: "100%",
            top: 300,
            bottom: 500,
          },
          {
            type: "pie",
            radius: ["50%", "30%"],
            center: ["50%", "50%"],
            data: salaryData.map((v) => {
              return {
                name: v.v_label,
                value: v.b_count,
              }
            }),
            label: {
              position: "outer",
              alignTo: "none",
              bleedMargin: 5,
            },
            left: "center",
            right: "100%",
            top: 100,
            bottom: 0,
          },
        ],
        color: ["#fda224", "#5097ff", "#3fceff", "#34d39a"],
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    }
    sexPie(salaryData)

    //地图
    function countryMap(provinceData) {
      const initMapChart = (provinceData) => {
        const myEchart = echarts.init(document.querySelector("#map"))
        const dataList = [
          { name: "南海诸岛", value: 0 },
          { name: "北京", value: 0 },
          { name: "天津", value: 0 },
          { name: "上海", value: 0 },
          { name: "重庆", value: 0 },
          { name: "河北", value: 0 },
          { name: "河南", value: 0 },
          { name: "云南", value: 0 },
          { name: "辽宁", value: 0 },
          { name: "黑龙江", value: 0 },
          { name: "湖南", value: 0 },
          { name: "安徽", value: 0 },
          { name: "山东", value: 0 },
          { name: "新疆", value: 0 },
          { name: "江苏", value: 0 },
          { name: "浙江", value: 0 },
          { name: "江西", value: 0 },
          { name: "湖北", value: 0 },
          { name: "广西", value: 0 },
          { name: "甘肃", value: 0 },
          { name: "山西", value: 0 },
          { name: "内蒙古", value: 0 },
          { name: "陕西", value: 0 },
          { name: "吉林", value: 0 },
          { name: "福建", value: 0 },
          { name: "贵州", value: 0 },
          { name: "广东", value: 0 },
          { name: "青海", value: 0 },
          { name: "西藏", value: 0 },
          { name: "四川", value: 0 },
          { name: "宁夏", value: 0 },
          { name: "海南", value: 0 },
          { name: "台湾", value: 0 },
          { name: "香港", value: 0 },
          { name: "澳门", value: 0 },
        ]

        //处理数据遍历
        provinceData.forEach((item) => {
          //找provinceData中符合条件的
          dataList.find((v) => {
            //判断value的值
            if (item.name.indexOf(v.name) !== -1) {
              v.value = item.value
            }
          })
        })

        let option = {
          title: {
            text: "籍贯分布",
            top: 10,
            left: 10,
            textStyle: {
              fontSize: 16,
            },
          },
          tooltip: {
            trigger: "item",
            formatter: "{b}: {c} 位学员",
            borderColor: "transparent",
            backgroundColor: "rgba(0,0,0,0.5)",
            textStyle: {
              color: "#fff",
            },
          },
          visualMap: {
            min: 0,
            max: 6,
            left: "left",
            bottom: "20",
            text: ["6", "0"],
            inRange: {
              color: ["#ffffff", "#0075F0"],
            },
            show: true,
            left: 40,
          },
          geo: {
            map: "china",
            roam: false,
            zoom: 1.0,
            label: {
              normal: {
                show: true,
                fontSize: "10",
                color: "rgba(0,0,0,0.7)",
              },
            },
            itemStyle: {
              normal: {
                borderColor: "rgba(0, 0, 0, 0.2)",
                color: "#e0ffff",
              },
              emphasis: {
                areaColor: "#34D39A",
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowBlur: 20,
                borderWidth: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
          series: [
            {
              name: "籍贯分布",
              type: "map",
              geoIndex: 0,
              data: dataList,
            },
          ],
        }
        myEchart.setOption(option)
      }
      initMapChart(provinceData)
    }
    countryMap(provinceData)
  } catch (err) {
    console.log(err)
  }
})
